<template>
	<view>
		<view class="search-pane">
			<view class="u-flex u-m-b-40">
				<view class="" @click="openAddress">
					<text>{{city}}</text>
					<u-icon name="arrow-down" size="28" class="u-m-r-30 u-m-l-10"></u-icon>
				</view>
				<view class="u-flex-1"><u-search placeholder="搜索详细位置" v-model="keyword" :show-action="false"
						@change="inputChange"></u-search></view>
			</view>
			<view class="u-flex u-row-between">
				<text class="iconfont icon-dingwei"></text>
				<view class="black u-flex-1">
					{{streetAddress}}
				</view>
				<view class="u-flex u-type-primary" @click="resetLoaction">
					<text class="iconfont icon-a-dingwei2 "></text>
					<text class="">重新定位</text>
				</view>
			</view>
		</view>

		<view class="address-list">
			<u-cell-group :border="false">
				<!-- <u-cell-item :title="currentArea||city" :arrow="false" :label-style="{color:'#999999'}"></u-cell-item> -->
				<u-cell-item :title="item.name" :arrow="false" :label="item.pname+item.cityname+item.address"
					:label-style="{color:'#999999',fontSize:'22rpx'}" v-for="(item ,index) in poiList" :key="index"
					@click="chooseAddress(item)"></u-cell-item>
			</u-cell-group>
		</view>

		<u-city-select v-model="showSelect" @city-change="addressChange"
			:defaultRegion="[address.province , address.city,address.district]"></u-city-select>
	</view>
</template>

<script>
	import amap from '@/common/amap-wx.130.js';
	import config from '@/config.js'
	export default {
		components: {},
		data() {
			return {
				keyword: "",
				amapPlugin: null,
				currentAdress: '',
				city: '',
				streetAddress: '获取位置',
				locPoint: '',
				poiList: [],
				address: {},
				showSelect: false,
				defaultRegion: [],
				selectArea: '',
				isAppLoc: false
			}
		},
		onLoad(e) {
			this.amapPlugin = new amap.AMapWX({
				key: config.AMAP_KEY
			})
			this.isAppLoc = e.appLoc == 1
			if (!e.appLoc) {
				this.currentAdress = uni.getStorageSync('lastSelectLoc')
			}
			this.init()
		},
		onShow() {
			if (this.canUse) {
				this.resetLoaction()
			}
			this.canUse = true
		},
		methods: {
			init() {
				const current = this.currentAdress || this.$store.state.vuex_address;
				this.address = current;
				this.city = current.city || config.D_CITY;
				this.streetAddress = current.street + current.number || config.D_ADDRESS;
				this.locPoint = current.location || config.D_LOC;
				this.getPOIAround()
			},
			getRegeo() {
				this.amapPlugin.getRegeo({
					success: (data) => {
						const {
							streetNumber: {
								street,
								number,
								location
							},
							city,
							province,
							district
						} = data[0].regeocodeData.addressComponent
						const addressComponent = {
							city,
							province,
							district,
							street,
							number,
							location
						}
						this.currentAdress = addressComponent;
						if (this.isAppLoc) {
							uni.removeStorageSync('lastSelectLoc')
							this.$u.vuex('vuex_address', addressComponent)
						} else {
							uni.setStorageSync('lastSelectLoc', addressComponent)
						}
						this.init()
					},
					fail: (err) => {
						this.streetAddress = '无法定位当前位置'
						console.log(err);
					}
				});
			},
			getPOIAround() {
				this.amapPlugin.getPoiAround({
					querykeywords: this.keyword || this.selectArea,
					location: this.locPoint,
					success: (data) => {
						// console.log(data.poisData);
						this.poiList = data.poisData;
						if (this.poiList.length == 0) {
							this.getinputTips()
						}
					},
					fail: () => {

					}
				})
			},
			getinputTips() {
				this.amapPlugin.getInputtips({
					keywords: this.keyword || this.selectArea,
					success: (data) => {
						// console.log(data);
						let i = 0;
						let _that = this;

						function getpoint() {
							if (data.tips[i].location.length > 0) {
								_that.locPoint = data.tips[i].location;
							} else {
								i++;
								getpoint()
							}
						}
						getpoint()
						this.getPOIAround()
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
			async resetLoaction() {
				this.streetAddress = "定位中...";
				this.keyword = "";
				this.locPoint = "";
				this.$gps.lock = false;
				let hasLoc = await this.$gps.getLocation()
				this.getRegeo()
			},
			// 搜索
			inputChange() {
				if (this.keyword) {
					this.locPoint = ""
					this.$u.debounce(this.getPOIAround, 800)
				} else {
					this.resetLoaction()
				}
			},
			// 选择地址
			chooseAddress(item) {
				console.log(item);
				const addressComponent = {
					city: item.cityname,
					province: item.pname,
					district: item.adname,
					street: item.name,
					number: '',
					location: item.location,
					address: item.address
				}
				if (this.isAppLoc) {
					uni.$emit('chooseLocation', addressComponent)
				} else {
					uni.setStorageSync('lastSelectLoc', addressComponent)
					uni.$emit('selectLocation', addressComponent)
				}

				uni.navigateBack()
			},
			// 城市选择
			addressChange(value) {
				// console.log(value);
				this.keyword = "";
				this.locPoint = "";
				const city = value.city.label == '市辖区' ? value.province.label : value.city.label
				this.selectArea = city + value.area.label
				this.city = city;
				this.streetAddress = value.area.label
				this.getinputTips()
			},
			openAddress() {
				this.showSelect = true
			}
		}
	}
</script>


<style scoped lang="scss">
	.search-pane {
		background-color: white;
		padding: 30rpx;
		position: sticky;
		top: 0;
		z-index: 99;
	}

	.address-list {
		margin-top: 20rpx;
		padding-bottom: 60rpx;
	}
</style>